<template>
	<div class="layout-padding">
		<HyTable
			:searchFields="searchFields"
			:searchConfig="searchConfig"
			:searchDefault="searchDefault"
			:searchData="searchData"
			:tableConfig="tableConfig"
			:tableColumns="tableColumns"
			ref="hyTableRef"
			:buttonConfig="{
				span: 4,
				offset: 1,
			}"
			:type="tabs"
			:tabls="tabls"
			@handleClick="handleClick"
			@clickDropdown="clickDropdown"
		>
			<template #dateSlot="{ row, column }">
				<!-- <slot name="dateSolt"></slot> -->
				<el-button type="primary" plain v-if="row.declareTime">{{ row.declareTime }}</el-button>
				<span v-else>--</span>
			</template>
			<template #statusSlot="{ row, column }">
				<!-- <slot name="dateSolt"></slot> -->
				<el-button :type="isStatus(row.status).statusButton" plain>{{ isStatus(row.status).isStatusString }}</el-button>
			</template>
			<template #operation>
				<el-table-column fixed="right" label="操作" width="180">
					<template #default="scoped">
						<el-button @click="reSend()">切换待/已办</el-button>
						<el-button text type="primary" icon="View" @click="showDetails(scoped.row)">查看</el-button>
						<el-dropdown @command="handleCommand" class="dropdown-class" v-if="whiachStatus != ''">
							<el-button class="el-dropdown-link" text type="primary">
								更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
							</el-button>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item command="a" v-if="status1"><el-button link type="primary">申报</el-button></el-dropdown-item>
									<el-dropdown-item command="b" v-if="status2"><el-button link type="info">取消</el-button></el-dropdown-item>
									<el-dropdown-item command="c" v-if="status3"><el-button link type="success">编辑</el-button></el-dropdown-item>
									<el-dropdown-item command="d" v-if="status4"
										><el-button link type="danger" @click="getAppCode(scoped.row)">删除</el-button></el-dropdown-item
									>
									<el-dropdown-item command="e" v-if="status5"
										><el-button link type="warning" @click="getAppCode(scoped.row)">撤回</el-button></el-dropdown-item
									>
									<el-dropdown-item command="f" v-if="status6"
										><el-button link @click="clickDropdown('history')">历史版本</el-button></el-dropdown-item
									>
									<el-dropdown-item command="h" v-if="status7"><el-button link type="info">修改申请</el-button></el-dropdown-item>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</template>
				</el-table-column>
			</template>
		</HyTable>
	</div>
	<!-- <Dialog :dialogTitle="dialogTitle" :dialogTableVisible="dialogTableVisibleF" @closeDialog="closeDialog"></Dialog> -->
</template>

<script lang="ts" setup>
import HyTable from '/@/components/HyTable/index.vue';
import Dialog from '../dialog/index.vue';
import { declareCancel } from '/@/api/digitalList/applicationRevew';

import { declarePendingTask, declareDoneTask } from '/@/api/digitalList/digitalLization';
import type { TabsPaneContext } from 'element-plus';
// import { pageList } from '/@/api/admin/role';
import { ElMessage, ElMessageBox } from 'element-plus';
const hyTableRef = ref();
const tabs = ref('tabs');
const tabsTypy = ref(1);
const tabls = computed(() => {
	return {
		type: 'card',
		tablesList: [
			{
				lable: '开发项目',
				value: 1,
			},
			{
				lable: '运维项目',
				value: 2,
			},
		],
	};
});

const searchDefault = ref({
	type: tabsTypy.value,
	// size: 20,
});
const deleteAppCode = ref(''); //删除的id
const tableColumns = computed(() => {
	return [
		{ prop: 'appCode', label: '数字化应用编号' },
		{ prop: 'appName', label: '数字化应用名称' },
		{ prop: 'domain', label: '所属领域' },
		{ prop: 'responsibleDept', label: '责任部门' },
		{ prop: 'leadDept', label: '应用牵头部门' },
		{ prop: 'declareTime', label: '申报时间', slot: 'dateSlot' },
		{ prop: 'status', label: '状态', slot: 'statusSlot' },
	];
});
// const tableConfigTest = ref({
// 	request: declarePendingTask,
// 	name: '',
// });
const tableConfig = ref({
	// request: declarePendingTask, //代办
	request: declareDoneTask, //已办
});
const reSend = () => {
	tableConfig.value = {
		request: declareDoneTask,
	}; //已办
	hyTableRef.value.reSend();
};
const searchConfig = ref({
	labelWidth: '120px',
	span: 6,
	offset: 0,
	type: 'search',
	title: '数字化应用申报审核',
	show: true,
});
// 配置搜索
const status1 = ref(true); //申报
const status2 = ref(true); //取消
const status3 = ref(true); //编辑
const status4 = ref(true); //删除
const status5 = ref(true); //撤回
const status6 = ref(true); //历史版本
const status7 = ref(true); //修改申请
const whiachStatus = ref('');
const changeStatus = (e?: Event) => {
	// console.log(e);
	// console.log(hyTableRef.value, 'hyTableRef');

	whiachStatus.value = '1';
	switch (e) {
		case '1': //选择待审核
			status1.value = false;
			status2.value = false;
			status3.value = false;
			status4.value = false;
			status5.value = true;
			status6.value = false;
			status7.value = false;
			break;
		case '2': //选择修改中
			status1.value = false;
			status2.value = false;
			status3.value = false;
			status4.value = false;
			status5.value = false;
			status6.value = false;
			status7.value = false;
			break;
		default: //选择通过和通过只显示查看
			whiachStatus.value = ''; //赋值空不显示，只留查看
			status1.value = false;
			status2.value = false;
			status3.value = false;
			status4.value = false;
			status5.value = false;
			status6.value = false;
			status7.value = false;

			break;
	}
};
const list = reactive({
	searchFields: {
		// changeDialog: {
		// 	type: 'button',
		// 	lable: '新增开发项目',
		// },
		name: {
			type: 'input',
			label: '关键字',
		},
		status: {
			type: 'select',
			label: '状态',
			options: [
				{
					label: '待审核',
					value: '1',
				},
				{
					label: '修改中',
					value: '2',
				},
				{
					label: '通过',
					value: '4',
				},
				{
					label: '不通过',
					value: '3',
				},
				// {
				// 	label: '修改申请',
				// 	value: '5',
				// },
			],
			change: changeStatus,
		},
		beginTime: {
			type: 'date',
			span: 7,
			picker: 'datetimerange',
			label: '申报时间',
			showFormat: 'YYYY-MM-DD',
		},
	},
});
const { searchFields } = toRefs(list);
const router = useRouter();
//查看跳转
const showDetails = (row: any) => {
	console.log(row);

	// 跳转详情页面
	router.push({
		path: '../detail/demandDeclaration',
		query: {
			title: searchConfig.value.title,
			// status: row.status,
			type: tabsTypy.value,
			id: row.appCode, //项目编号
			processInstanceId: row.processInstanceId, //流程实例id
			taskId: row.taskId, //任务id
			nodeId: row.nodeId, //节点id
		},
	});
};

//接收tab值调用接口
const handleClick = (tab: TabsPaneContext) => {
	switch (tab) {
		case '1':
			// searchFields.value.changeDialog.lable = '新增运维项目';
			tabsTypy.value = 2;
			break;

		default:
			// searchFields.value.changeDialog.lable = '新增开发项目';
			tabsTypy.value = 1;
			break;
	}
};
//读取状态
const isStatus = (str?: string) => {
	const obj = ref({
		isStatusString: '',
		statusButton: '',
	});
	switch (str) {
		case '2':
			obj.value.isStatusString = '申报中';
			obj.value.statusButton = 'primary';
			break;
		case '3':
			obj.value.isStatusString = '不通过';
			obj.value.statusButton = 'info';
			break;
		case '4':
			obj.value.isStatusString = '通过';
			obj.value.statusButton = 'success';
			break;
		case '5':
			obj.value.isStatusString = '修改申请';
			obj.value.statusButton = 'warning';
			break;
		case '6':
			obj.value.isStatusString = '待修改';
			obj.value.statusButton = 'danger';
			break;
		default:
			obj.value.isStatusString = '待申报';
			obj.value.statusButton = '';
			break;
	}
	return obj.value;
};
//弹窗相关数据
const dialogTableVisibleF = ref(false);
const dialogTitle = ref('');
const gridDataHead = ref([{ prop: 'date', label: '创建时间' }]);
const gridData = ref([
	{
		date: '2016-05-02',
	},
]);
const closeDialog = (data?: Object) => {
	if (data) {
		router.push({
			path: '../addDigitalLization/index',
			query: {
				appCode: data.code,
			},
		});
	}
	dialogTableVisibleF.value = !dialogTableVisibleF.value;
};
//接收下拉菜单传递的参数区别打开弹窗
const clickDropdown = (str?: string) => {
	if (str == 'history') {
		dialogTitle.value = '历史数据';
	} else {
		dialogTitle.value = '请选择方案中的开发项目';
	}
	dialogTableVisibleF.value = !dialogTableVisibleF.value;
};

//操作项逻辑处理
const handleCommand = (command: string | number | object) => {
	//   ElMessage(`click on item ${command}`)
	switch (command) {
		case 'a': //申报
			proxyMessage.value = '是否确定提交申报？';
			openElMessageBox();
			break;
		case 'd': //删除
			proxyMessage.value = '是否确定删除此条信息？';
			openElMessageBox();
			break;
		case 'e': //撤销
			proxyMessage.value = '是否确定撤销此申报？';
			openElMessageBox();
			break;
		case 'f': //历史版本
			dialogTableVisibleF.value = !dialogTableVisibleF.value;
			break;
		case 'h': //修改申请
			dialogTableVisibleF.value = !dialogTableVisibleF.value;
			break;
		default:
			break;
	}
};
//消息删除提示
const proxyMessage = ref('');
const openElMessageBox = () => {
	ElMessageBox.confirm(
		proxyMessage.value, //提示内容
		'提示', //提示顶部
		{
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
			center: true,
		}
	)
		.then(() => {
			switch (proxyMessage.value) {
				case '是否确定删除此条信息？':
					declareDelete(deleteAppCode.value).then((res) => {
						console.log(res, 'res');
						ElMessage({
							type: 'success',
							message: '操作成功',
						});
					});
					break;
				case '是否确定撤销此申报？':
					declareCancel(deleteAppCode.value).then((res) => {
						console.log(res, 'res');
						ElMessage({
							type: 'success',
							message: '操作成功',
						});
					});
					break;
				default:
					ElMessage({
						type: 'success',
						message: '操作成功',
					});
					break;
			}
		})
		.catch(() => {});
};
const getAppCode = (row?: any) => {
	deleteAppCode.value = row.appCode;
};
const test1 = ref('1234560000123456');
//撤销
const declareCancelAppCode = () => {
	declareCancel(test1.value).then((res) => {
	});
};
onMounted(() => {
	// declarePageList();
	// declareCancelAppCode();
});
</script>
<style scoped lang="scss">
.dropdown-class {
	margin-left: 20px;
}
</style>
